<template>
  <div class="champion-spell">
    <Menu style="z-index: 0" mode="horizontal" :theme="theme1" active-name="1">
      <MenuItem name="1">
        <button @click="toShowHaveSpellCompion" value="1">
          <Icon type="ios-people" />
          已学技能英雄
        </button>
      </MenuItem>

      <MenuItem name="2">
        <button @click="toShowNoHaveSpellCompion" value="0">
          <Icon type="ios-people" />
          未学技能英雄
        </button>
      </MenuItem>
      <MenuItem name="3">
        <button @click="toShowDeletedChampion" value="-1">
          <Icon type="ios-people" />
          等待回归英雄
        </button>
      </MenuItem>
      <MenuItem name="4">
        <Icon type="ios-people" />
        <Input
          search
          placeholder="查询有技能的英雄..."
          v-width="200"
          class="ivu-ml"
          v-model="find"
          @on-change="fuzzySearch"
        />
      </MenuItem>
    </Menu>
<!--    <Modal-->
<!--      v-model="modal12"-->
<!--      draggable-->
<!--      scrollable-->
<!--      title="添加技能"-->
<!--    >-->
<!--      <div class="modal-header">-->
<!--        <h3>输入需要添加的技能信息</h3>-->
<!--      </div>-->
<!--      <div class="modal-body">-->
<!--        <div style="margin: 25px">-->
<!--          <p><i style="color: red">* </i>CODE</p>-->
<!--          <Input placeholder="code：人名加技能键" style="width: 400px" />-->
<!--        </div>-->
<!--        <div style="margin: 25px">-->
<!--          <p><i style="color: red">* </i>SPELLKEY</p>-->
<!--          <Input placeholder="spellKey：技能按键" style="width: 400px" />-->
<!--        </div>-->
<!--        <div style="margin: 25px">-->
<!--          <p><i style="color: red">* </i>NAME</p>-->
<!--          <Input placeholder="name：技能名称" style="width: 400px" />-->
<!--        </div>-->
<!--        <div style="margin: 25px">-->
<!--          <p><i style="color: red">* </i>DESCRIPTION</p>-->
<!--          <Input-->
<!--            placeholder="description：技能描述"-->
<!--            type="textarea"-->
<!--            style="width: 400px"-->
<!--          />-->
<!--        </div>-->
<!--      </div>-->
<!--    </Modal>-->
    <!-- 更新技能弹出框 -->
    <Modal
            v-model="showUpdate"
            :loading="submitting"
            draggable
            scrollable
            title="英雄技能"
            @on-ok="handleSubmit"
    >
      <div class="modal-body">
        <Form :model="newchampionSpell" :rules="rules" ref="form">
          <FormItem label="code：" prop="code">
            <Input v-model="newchampionSpell.code" placeholder="code：人名加技能键" style="width: 400px" />
          </FormItem>
          <FormItem label="快捷键：" prop="spellKey">
            <Input v-model="newchampionSpell.spellKey" placeholder="code：人名加技能键" style="width: 400px" />
          </FormItem>
          <FormItem label="技能图片：" prop="iconImg">
            <img v-show="newchampionSpell.iconImg" class="iconImg" :src="newchampionSpell.iconImg" />
            <Upload action="http://localhost:8080/uploads/spell" name="files" :on-success="uploadSuccess" :show-upload-list="false">
              <Button icon="ios-cloud-upload-outline">上传图片</Button>
            </Upload>
          </FormItem>
          <FormItem label="技能名称：" prop="name">
            <Input v-model="newchampionSpell.name" placeholder="newName：新技能名称" style="width: 400px" />
          </FormItem>
          <FormItem label="技能描述：" prop="description">
            <Input v-model="newchampionSpell.description" type="textarea" placeholder="newDescription：新技能描述"  style="width: 400px"/>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <Collapse simple v-for="(Champion, index) in ChampionList" :key="index">
      <Panel name="1">
        <img
          style="vertical-align: middle; margin-top: -2px"
          width="38px"
          height="36px"
          :src="Champion.iconImg"
        />
        {{ Champion.name }} - {{ Champion.title }}

        <Button
          v-if="Champion.spells.length!==4"
          style="margin-top: 3px"
          @click="handleAdd(Champion.id)"
          class="add-spell"
          >添加技能</Button
        >
        <!-- 英雄列表卡片 -->
        <div slot="content">
          <Row justify="center" align="middle" class="ivu-mt">
            <Col
              :xl="6"
              :lg="6"
              :md="12"
              :sm="24"
              :xs="24"
              class="ivu-mb"
              v-for="(spell, index) in Champion.spells"
              :key="index"
            >
              <Card shadow :padding="0">
                <List item-layout="vertical" class="ivu-pl ivu-pr">
                  <ListItem>
                    <ListItemMeta
                      style=" line-height: 0px"
                      :title="spell.name"
                    >
                      <Avatar :src="spell.iconImg" slot="avatar" size="large" />

                      <div slot="description" class="list-card-list-desc">
                        快捷键：{{spell.spellKey}}

                        <p style="cursor: pointer;" class="m-content overflow-line" id="J_description"  @click="btn_user($event)">
                          <Ellipsis style="font-size: 12px;"
                                :text="spell.description"
                                :lines="4"
                          />
                        </p>
                      </div>
                    </ListItemMeta>
                    <template slot="action">
                      <Divider class="ivu-mb-8" />
                      <li v-width="'50%'"  @click="handleUpdate(index,spell.championId)">编辑</li>
                      <li v-width="'50%'"  @click="handleDelete(spell.id)">删除</li>
                    </template>
                  </ListItem>
                </List>
              </Card>
            </Col>
          </Row>
        </div>
      </Panel>
    </Collapse>
    <div class="ivu-mt ivu-text-right">
      <Page
        :total="page.total"
        :current="page.current"
        :page-size="page.pageSize"
        :page-size-opts="page.sizeOpts"
        show-total
        show-sizer
        @on-change="pageNumChange"
        @on-page-size-change="pageSizeChange"
      />
    </div>
  </div>
</template>

<script>
import {
  getChampionSpellById,
  getChampionSpell,
  updateChampionSpell,
  addChampionSpell,
  deleteChampionSpellById,
} from "@/api/champion-spell";

const baseData = {
  id:null,
  championId: 0,
  code: '',
  name: '',
  spellKey: '',
  description: '',
  iconImg:""
};

export default {
  name: "champion-spell",
  data() {
    return {
      theme1: "light",
      ChampionList: [],
      modal12: false,
      modal13: false,
      modal14: false,
      isShowMore: false,
      isDescStatus: true,
      //模糊查询
      find: "",
      // 分页查询
      query: {
        pageNum: 0,
        pageSize: 12,
        val: 1,
        find: "",
      },
      // 分页展示
      page: {
        total: 0,
        current: 1,
        sizeOpts: [12, 24, 36, 48],
        pageSize: 12,
      },
      newchampionSpell:Object.assign({},baseData),
      loading: false,
      showUpdate: false,
      submitting: true,
      championSpell:[],
      // 英雄技能数组
      championSpellList: [],
      // 没有英雄技能数组
      NoSpellChampionList: [],
      updateIndex: -1,
      rules: {
        name: [
          {required: true, message: '请输入技能名称', trigger: 'blur'}
        ],
        description: [
          {required: true, message: '请输入技能描述', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入code', trigger: 'blur'}
        ],
        spellKey: [
          {required: true, message: '请输入快捷键', trigger: 'blur'}
        ],
      },
    };
  },
  mounted() {
    this.listChampion();
  },
  methods: {
    btn_user (e) {
      let el = e.currentTarget;
      el.classList[!this.isDescStatus ? 'add' : 'remove']('overflow-line');
      this.isDescStatus = !this.isDescStatus;
      this.isShowMore = true;
    },
    toShowHaveSpellCompion(event) {
      this.query.val = event.target.value;
      this.listChampion();
    },
    toShowNoHaveSpellCompion(event) {
      this.query.val = event.target.value;
      this.listChampion();
    },
    toShowDeletedChampion(event) {
      this.query.val = event.target.value;
      this.listChampion();
    },
    listChampion() {
      getChampionSpell(this.query).then((res) => {
        console.log(res);
        this.ChampionList = res.list;
        this.page.total = res.total;
        this.page.current = res.pageNum;
      });
    },
    //模糊查询
    fuzzySearch() {
      this.query.find = this.find;
      this.query.val = 1;
      this.listChampion();
    },
    //查询第几页内容
    pageNumChange(num) {
      this.query.pageNum = num;
      // 重新获取数据
      this.listChampion();
    },
    //改变每页显示多少条数据
    pageSizeChange(size) {
      this.query.pageSize = size;
      this.page.pageSize = size;
      this.listChampion();
    },
    //添加技能按钮
    handleAdd(id) {
      this.newchampionSpell = Object.assign({}, baseData);
      this.updateIndex = -1;
      this.showUpdate = true;
      this.newchampionSpell.championId = id;
      this.$refs.form.resetFields();
    },
    //编辑按钮
    handleUpdate(index,championId) {
      // 根据 id 去查找英雄技能
      this.ChampionSpellById(index,championId);
      this.updateIndex = index;
      this.showUpdate = true;
    },
    ChampionSpellById(index,championId) {
      getChampionSpellById(championId).then((res) => {

        this.championSpellList = res;
        this.newchampionSpell = this.championSpellList[index];
      })
    },
    //上传成功返回
    uploadSuccess(response, file, fileList) {
      console.log(response);
      // 获取返回响应数组的第一个元素
      this.newchampionSpell.iconImg = response.pop();
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          setTimeout(() => {
            if (this.updateIndex >= 0) {
              this.championSpell[this.updateIndex] = Object.assign({}, this.newchampionSpell);
            } else {
              this.championSpell.push(this.newchampionSpell);
            }
            if(this.newchampionSpell.id) {
              console.log("edit");
              // console.log(this.newData);
              this.toUpdateChampionSpell(this.newchampionSpell);
            } else {
              console.log("add");
              this.toAddChampionSpell(this.newchampionSpell);
            }
            this.$Message.success('编辑成功!');
            this.showUpdate = false;
            this.submitting = false;
            this.$nextTick(() => {
              this.submitting = true;
            });
            // 刷新页面
            window.location.reload();
          }, 1000);
        } else {
          this.submitting = false;
          this.$nextTick(() => {
            this.submitting = true;
          });
        }
      });
    },
    // 更新
    toUpdateChampionSpell(spell) {
      updateChampionSpell(spell).then((res) => {
        console.log(res);
      })
    },
    // 新增
    toAddChampionSpell(spell) {
      addChampionSpell(spell).then((res) => {
        console.log(res);
      })
    },
    // 删除
    handleDelete(id) {
      this.$Modal.confirm({
        title: '删除英雄技能',
        content: '确定删除该英雄的技能吗？',
        onOk: () => {
          deleteChampionSpellById(id).then((res) => {
            this.$Message.success('删除成功!');
            console.log(res);
            window.location.reload();
          });
        }
      });
    },
  },
};
</script>

<style lang="less">
.update-spell {
  float: right;
  margin-right: 6px;
  margin-top: 3px;
}
.add-spell {
  float: right;
  margin-right: 6px;
  margin-top: -24px;
}
.delete-spell {
  float: right;
  margin-right: 6px;
  margin-top: 3px;
}
.spellKey {
  padding-bottom: 10px;
  font-size: 14px;
  color: #999;
}
menu,
menuitem {
  cursor: none;
}
button {
  cursor: pointer;
  border: hidden;
  outline: none;
  background-color: #fff;
  height: 55px;
}
.m-content {
  &.overflow-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
</style>
